﻿body {
  padding: 0;
  margin: 0;
  background-color:rgba(229,229,229,1);
  word-break:break-all;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
}

.chat-thread {
  margin: 24px auto 0 auto;
  padding: 0 20px 0 0;
  list-style: none;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chat-thread li {
  position: relative;
  clear: both;
  display: inline-block;
  padding: 10px 10px 10px 10px;
  margin: 0 0 20px 0;
  font: 16px/20px;
  border-radius: 10px;
  background-color: rgba(25, 147, 147, 0.2);
  color:black;
  white-space:pre-wrap;
}


/* Chat - Avatar */
.chat-thread li:before {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  content: '';
}

/* Chat - Speech Bubble Arrow */
.chat-thread li:after {
  position: absolute;
  top: 15px;
  content: '';
  width: 0;
  height: 0;
  border-top: 15px solid rgba(25, 147, 147, 0.2);
}
.chat-thread li[role="me"]{
  animation: show-chat-odd 0.15s 1 ease-in;
  -moz-animation: show-chat-odd 0.15s 1 ease-in;
  -webkit-animation: show-chat-odd 0.15s 1 ease-in;
  float: right;
  margin-right: 40px;
  margin-left: 20px;
  background-color:rgb(87,230,0);
}

.chat-thread li[role="me"]:before {
  right: -60px;
  background-image: url();
}

.chat-thread li[role="me"]:after {
  border-right: 10px solid transparent;
  border-top:10px solid rgb(87,249,0);
  right: -10px;
}

.chat-thread li[role="you"] {
  animation: show-chat-even 0.15s 1 ease-in;
  -moz-animation: show-chat-even 0.15s 1 ease-in;
  -webkit-animation: show-chat-even 0.15s 1 ease-in;
  float: left;
  margin-left: 60px;
  margin-right:-1em;
  background-color:white;
}

.chat-thread li[role="you"]:before {
  left: -60px;
  background-image: url();
}

.chat-thread li[role="you"]:after {
  border-left: 10px solid transparent;
  border-top:10px solid white;
  left: -10px;
}
#convo{
	margin-bottom:9%;
}
#sent_div{
	position:fixed;
	float:bottom;
	bottom:0px;
	height:2.2em;
	width:100%;
	background-color:rgba(229,229,229,1);
}
.sent_input{
	border:solid 1px #3d3d3d;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width:78%;
	height:1.5em;
	margin-left:1%;
	font-size:1.1em;
    autocomplete:off;
}
.sent_btn{
	border:solid 1px #3d3d3d;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width:17%;
	max-width:150px;
	height:2em;
}
.msg_end{
     height:0px;
     overflow:hidden;
}

/*食物类he新闻类展示的css*/
.food,.news{
	max-width:30em;
}
.food img,.news img{
	width:100%;
	height:7em;
}

.food section,.news section{
	background-color:white;
	min-height:4em;
	border-bottom:1px solid #E0E0E0;
	
}
.food section img{
	width:50px;
	height:50px;
	display:block;
	float:right;
}
.food section p{
    display:block;
    max-height:2.3em;
	margin:3px 50px 3px 2px;
    overflow:hidden;
}
.news section p{
	display:block;
    max-height:2.3em;
	margin:3px 5px 3px 2px;
    overflow:hidden;
}
.news section p+p{
	color:#B2B2B2;
	text-align:right;
	font-size:0.8em;
}